<template>
    <div class="equipmentConsume-wrapper">
        <div class="title">
            <span class="num">{{ $props.Total }}</span>
            <div class="name" style="width: 300px; height: 20px;">{{ title }}</div>
        </div>
        <div :id="name"></div>
    </div>
</template>

<script  lang="ts">
import { onMounted, ref, onUpdated } from 'vue';
import { Chart } from '@antv/g2';
import { defineComponent } from 'vue';
import view from '@antv/g2/lib/chart/view';
export default defineComponent({
    props: {
        data: Array,
        title: String,
        name: String,
        Total: Number,
    },

    setup(props: any) {
        onUpdated(() => {
            const chart = new Chart({
                container: props.name,
                autoFit: true,
                height: 80,
            });
            console.log(props.data, 'dididididi');

            chart.data(props.data);
            chart.axis('data', {
                label: {
                    formatter: (val) => {
                        return (+val);
                    },
                },
            });
            chart.tooltip({
                position: 'top',
                crosshairs: {
                    type: 'xy',
                    
                },
            });

            chart.area().position('type*data');
            chart.line().position('type*data');
            chart.render();
        })

    }
});
</script>

<style scoped>

</style>